<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edmate Learning Dashboard HTML Template</title>
    <link rel="shortcut icon" href="assets/images/logo/favicon.png">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/file-upload.css">
    <link rel="stylesheet" href="assets/css/plyr.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css">
    <link rel="stylesheet" href="assets/css/full-calendar.css">
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <link rel="stylesheet" href="assets/css/editor-quill.css">
    <link rel="stylesheet" href="assets/css/apexcharts.css">
    <link rel="stylesheet" href="assets/css/calendar.css">
    <link rel="stylesheet" href="assets/css/jquery-jvectormap-2.0.5.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <style>
        /* 页面评论按钮位置及样式 */
        .comment-button-page {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #007bff; /* 按钮背景色 */
            color: #fff; /* 图标颜色 */
            font-size: 18px;
            padding: 10px 15px;
            border: none;
            border-radius: 50px; /* 圆角 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .comment-button-page i {
            font-size: 20px;
            margin-right: 8px;
        }

        .comment-button-page:hover {
            background-color: #0056b3; /* 悬停时背景色 */
            transform: scale(1.05); /* 悬停时按钮轻微放大 */
        }

        .comment-button-page:focus {
            outline: none;
        }

        /* 卡片容器 */
        .comment-card-container {
            display: flex;
            flex-wrap: wrap; /* 卡片超出时自动换行 */
            justify-content: flex-start;
            gap: 20px;
            margin-top: 80px;
        }

        /* 单个卡片 */
        .comment-card {
            width: 250px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-left: 20px;
        }

        /* 卡片头部 */
        .comment-card-header {
            display: flex;
            align-items: center;
            padding: 16px;
        }

        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }

        .user-info h5 {
            margin: 0;
            font-size: 16px;
            font-weight: bold;
        }

        .user-info p {
            margin: 0;
            font-size: 12px;
            color: #777;
        }

        /* 卡片内容 */
        .comment-card-body {
            padding: 16px;
            font-size: 14px;
            color: #333;
        }

        /* 卡片底部 - 点赞和评论按钮 */
        .comment-card-footer {
            display: flex;
            justify-content: space-between;
            padding: 12px 16px;
            background-color: #f7f7f7;
            border-top: 1px solid #ddd;
        }

        .like-button, .comment-button {
            background: none;
            border: none;
            color: #007bff;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }

        .like-button:hover, .comment-button:hover {
            color: #0056b3;
        }

        /* 评论区样式 */
        /*.comments-section {
            padding: 16px;
            background-color: #f9f9f9;
            margin-top: 10px;
            border-top: 1px solid #ddd;
        }

        .comments-section h5 {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }*/

        /* 单条评论 */
        /*.comment-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .comment-item p {
            margin: 0;
            font-size: 14px;
            color: #333;
        }*/

        /* 模态框样式 */
        .modal-body textarea {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border-radius: 5px;
            border: 1px solid #ddd;
            resize: none;
        }

        .modal-footer .btn {
            font-size: 14px;
        }
    </style>
</head> 
<body>
    <!-- 页面评论按钮 -->
    <button class="comment-button-page" data-bs-toggle="modal" data-bs-target="#commentModal">
        <i class="ph ph-comment"></i>+ 评论
    </button>

    <!-- 卡片容器 -->
    <div class="comment-card-container">
        <div class="comment-card">
            <!-- 用户信息 -->
            <div class="comment-card-header">
                <img src="assets/images/thumbs/user-img.png" alt="User" class="user-avatar">
                <div class="user-info">
                    <h5 class="user-name">John Doe</h5>
                    <p class="user-date">2024年12月5日</p>
                </div>
            </div>
            
            <!-- 用户评价 -->
            <div class="comment-card-body">
                <p class="user-comment">这个系统真的非常好，使用起来非常便捷，界面也很友好，推荐给大家！</p>
            </div>
            
            <!-- 点赞 -->
            <div class="comment-card-footer">
                <button class="like-button">
                    <i class="ph ph-heart"></i> 赞
                </button>
            </div>
            
        </div>
        <div class="comment-card">
            <!-- 用户信息 -->
            <div class="comment-card-header">
                <img src="assets/images/thumbs/user-img.png" alt="User" class="user-avatar">
                <div class="user-info">
                    <h5 class="user-name">John Doe</h5>
                    <p class="user-date">2024年12月5日</p>
                </div>
            </div>
            
            <!-- 用户评价 -->
            <div class="comment-card-body">
                <p class="user-comment">这个系统真的非常好，使用起来非常便捷，界面也很友好，推荐给大家！</p>
            </div>
            
            <!-- 点赞 -->
            <div class="comment-card-footer">
                <button class="like-button">
                    <i class="ph ph-heart"></i> 赞
                </button>
            </div>
            
        </div>
    </div>
    
    <!-- 发布评论的模态框 -->
    <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="commentModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="commentModalLabel">发布评论</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <textarea class="form-control" id="userCommentInput" rows="4" placeholder="写下你的评论..."></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="submitCommentButton">发布评论</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Jquery js -->
    <script src="assets/js/jquery-3.7.1.min.js"></script>
    <!-- Bootstrap Bundle Js -->
    <script src="assets/js/boostrap.bundle.min.js"></script>
    <script src="assets/js/phosphor-icon.js"></script>
    <script src="assets/js/file-upload.js"></script>
    <script src="assets/js/plyr.js"></script>
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
    <script src="assets/js/full-calendar.js"></script>
    <script src="assets/js/jquery-ui.js"></script>
    <script src="assets/js/editor-quill.js"></script>
    <script src="assets/js/apexcharts.min.js"></script>
    <script src="assets/js/calendar.js"></script>
    <script src="assets/js/jquery-jvectormap-2.0.5.min.js"></script>
    <script src="assets/js/jquery-jvectormap-world-mill-en.js"></script>
    <script src="assets/js/main.js"></script>

    <script>
        // 需要改，数据库实现
        // 点赞按钮
        const likeButton = document.querySelector('.like-button');
        let likeCount = 0;  // 初始点赞数

        likeButton.addEventListener('click', () => {
            likeCount++;
            likeButton.innerHTML = `<i class="ph ph-heart"></i> 赞 (${likeCount})`;
        });

        // 发布评论按钮
        const submitCommentButton = document.getElementById('submitCommentButton');
        const userCommentInput = document.getElementById('userCommentInput');
        const commentsList = document.querySelector('.comments-list');

        // 监听评论发布按钮
        submitCommentButton.addEventListener('click', () => {
            const commentText = userCommentInput.value.trim();

            if (commentText !== '') {
                // 将评论输入到数据库，待实现

                // 清空输入框并关闭模态框
                userCommentInput.value = '';
                const modal = bootstrap.Modal.getInstance(document.getElementById('commentModal'));
                modal.hide();
            }
        });
    </script>
</body>
</html>
